<template>
  <div>
    <MyTable :data="list">
      <template #default="{ row }">
        <span
          :style="{
            padding: '5px',
            color: row.tag === 'Home' ? '#409eff' : '#87cf63',
            border: '1px solid gray',
            borderColor: row.tag === 'Home' ? '#409eff' : '#87cf63'
          }"
          >{{ row.tag }}</span
        >
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './MyTable.vue'
export default {
  components: {
    MyTable
  },
  data () {
    return {
      list: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Home'
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Office'
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Home'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          tag: 'Office'
        }
      ]
    }
  }
}
</script>
